<template>
	<view :class="['sol-switch', check ? 'sol-switch-right' : 'sol-switch-left']" @click.stop.prevent="$_click"></view>
</template>

<script>
	/**
	 * sol-switch 开关选择组件
	 * @property {Boolean} checked 是否选中 - 默认false
	 * @event {Function} change 开关选择点击事件
	 * @example <sol-switch :checked="true" @change="fnClick"></sol-switch>
	 */
	export default {
		name: 'sol-switch',
		props: {
			// 是否选中
			checked: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				check: false
			};
		},
		mounted() {
			// 初始是否打开
			this.check = this.checked;
		},
		methods: {
			// 点击
			$_click(e) {
				this.check = !this.check;
				this.$emit('change', this.check);
			}
		}
	};
</script>

<style lang="scss">
	$color-bg: #576069;
	$color-bg-inverse: #af2f2f;
	$color-dot: #bbbbbb;
	$border-width: 1rpx;
	$radius: 20rpx;

	.sol-switch {
		height: 44rpx;
		width: 90rpx;
		background-color: $color-bg;
		border: $border-width $color-bg solid;
		border-radius: $radius;
		display: flex;
		align-items: center;

		&::after {
			content: '';
			background-color: $color-dot;
			border-radius: 50%;
			height: 36rpx;
			width: 36rpx;
			display: block;
		}

		&-right {
			background-color: $color-bg-inverse;
			border: $border-width $color-bg-inverse solid;
			transition: all 0.3s;
		}

		&-right::after {
			transform: translateX(130%);
			transition: all 0.3s;
		}

		&-left {
			background-color: $color-bg;
			border: $border-width $color-bg solid;
			transition: all 0.3s;
		}

		&-left::after {
			transform: translateX(20%);
			transition: all 0.3s;
		}
	}
</style>
